<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>缴费登录</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <style>
        html,body{
            height: 100%;
        }
        html{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div style="height: 100%">
    <iframe src="../view/loading.html" style="display: none" id="contentIframe" width="100%" height="100%"></iframe>
    <div style="background-color: #151924;width: 100%;height: 100%;display: block">
    <form class="layui-form" id="showLoading" action="">
        <label style="font-size: 70px;color: green;margin: 0 345px;">电信活动管理系统</label>
        <div class="layui-form-item" style="padding-top: 30px;margin-left: 30%;">
            <label class="layui-form-label" style="color: red;">用户名:</label>
            <div class="layui-input-block">
                <input type="text" name="lname" lay-verify="lname" placeholder="请输入账号" autocomplete="off"
                       class="layui-input"
                       style="display: inline-block;width:30%">
            </div>
        </div>
        <div class="layui-form-item" style="padding-top: 10px;margin-left: 30%;">
            <label class="layui-form-label" style="color: red;">密码:</label>
            <div class="layui-input-block">
                <input type="text" name="lpwd" lay-verify="lpwd" placeholder="请输入密码" autocomplete="off"
                       class="layui-input"
                       style="display: inline-block;width:30%">
            </div>
        </div>
        <div class="layui-form-item" pane="" style="margin-left: 30%;">
            <div class="layui-input-block">
                <input type="checkbox" name="jizhu" lay-skin="primary" title="记住密码" checked="">
            </div>
        </div>
        <div style="margin: 0 41%;">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="login">登录</button>
        <button type="reset"class="layui-btn">重置</button>
        </div>
    </form>
    </div>
</div>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['jquery','table','form'],function(){
        var $=layui.jquery,
        table=layui.table,
        form=layui.form;
        var lname=document.getElementsByName('lname')[0];
        var lpwd=document.getElementsByName('lpwd')[0];
        var contentIfram=document.getElementById('contentIframe');
        var showLoading=document.getElementById('showLoading');
        //判断当前cookie是否有值，---即判断getCookie()函数的返回值是否有
        if (getCookie("lname")) {
            lname.value = getCookie("lname");
        }
        if(getCookie("lpwd")){
            lpwd.value = getCookie("lpwd");
        }
        //自定义验证规则
        form.verify({
            lname:function(value){
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入用户名';
                }
            },
            lpwd:function(value){
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入密码';
                }
            }
        })
        //获取cookie的值
        function getCookie(key) {
            //由于cookie是通过一个分号+空格的形式串联起来的，
            // 所以这里需要先按分号空格截断,
            // 变成[name=Jack,pwd=123456,age=22]数组类型；
            var arr1 = document.cookie.split("; ");
            for (var i = 0; i < arr1.length; i++) {
                var arr2 = arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
                if (arr2[0] == key) {
                    return decodeURI(arr2[1]);
                }
            }
        }
        //监听查找按钮
        form.on('submit(login)',function(data){
            contentIfram.style.display='block';
            showLoading.style.display='none';
            // 如果记住密码被选中传的值就是no
            $.ajax({
                type:'POST',
                url:'/aaa',
                data: {
                    lname: data.field.lname,
                    lpwd: data.field.lpwd,
                    jizhu: data.field.jizhu
                },
                datatype:'JSON',
                success:function(data){
                    if(data.code=='0'){

                    }else{
                        contentIfram.style.display='none';
                        showLoading.style.display='block';
                        lname.value="";
                        lpwd.value="";
                        layer.msg("账号或密码错误，请重新登录!");
                    }
                },
                error:function(){
                    contentIfram.style.display='none';
                    showLoading.style.display='block';
                    lname.value="";
                    lpwd.value="";
                    layer.msg("账号或密码错误，请重新登录!");
                }
            })
            return false;
        });
        function setCookie(cookieName,value,expiresTime,path){
            expiresTime = expiresTime || "Thu, 01-Jan-2030 00:00:01 GMT";
            path = path || "/";
            document.cookie=cookieName+ "=" +encodeURIComponent(value)+ "; expires="+ expiresTime+ "; path="+path;
        }
    })
</script>
</body>
</html>